<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style>
            div {
                display: flex;
                height: 1000px;
                height: 500px;
                background-color: darkorange;
            }
            /* 平均切成三等份 */
            span {
                flex: 3;
                height: 100px;
                background-color: darkturquoise;    
            }
            
            span:nth-child(2) {
                /* align-self: flex-end;---------单独控制第二个盒子贴到下沿 */
                align-self: flex-end;
                /* 把第二个盒子提到前边 */
                /* order----默认是0，值越小越靠前 */
                order: -1;
            }
        </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>